<template>
<div class="container">
  <div class="row" ref="row" v-if="list.wallpapers">
      <div class="pic-col"  v-for="(item,index) of list.wallpapers" :key="item.wallpaperId" :class="(index+2)%8==0||((index+1)%8==0&&index!=0)?'col-lg-6 col-md-12 col-xl-6':'col-lg-4 col-md-6'">
        <div class="pic-warp">
          <router-link :to="'/view/'+index">
            <img :src="item.wallpaperImg[0].uri" class="pic" />
          </router-link>
          <ul class="pic-tools">
            <li>{{item.collectCount}}次喜欢</li>
            <li class="iconfont" @click="fullScreen(index)">&#xe63f;</li>
            <li class="iconfont" v-if="$route.name=='love'" @click="dele(index)">&#xe664;</li>
            <li class="iconfont"  @click="used(index)">&#xe600;</li>
            <li class="iconfont" :class="{love:item.hasCollect==1}" @click="setLove(item.wallpaperId,index)">&#xe608;</li>
          </ul>
          <bar v-if="picindex==-2&&beforpic==index"  :full="picindex"></bar>
        </div>
      </div>
  </div>
  <div v-else class="empty">
      <img class="empty-img" src="~@/assets/empty.svg"/>
      <p class="empty-title">这里空空如她，快去挑选喜欢的壁纸吧</p>
      <router-link class="go-home" to="/">随便逛逛</router-link>
  </div>
  <full v-if="picindex>=0" :index="picindex" @close="close"></full>
</div>
</template>

<script>
import { defineComponent,ref,computed} from 'vue';
import { useStore } from "vuex";
import axios from 'axios'
import Full from "./Full";
import Bar from "./Bar";
import store from '@/store';
export default defineComponent({
  props:{
    url:{
      type:String
    }
  },
  data(){
    return {
      loading:true
    }
  },
  components:{
    Full,
    Bar
  },
  setup(){
    const store = useStore();
    const setLove=(id,index)=>{
      axios.get(`/apis/wallpapercontent/wallpaper/report/opt?type=1&wallpaperId=${id}`).then(data=>{
        store.commit('setLove',index)
      }).catch(e=>{
        
      })
    }
    const picindex=ref(-1)
    const beforpic=ref(-1)
    const fullScreen=(i)=>{
      console.log(i)
      picindex.value=-2
      beforpic.value=i
      var newImg = new Image()
      newImg.src =store.state.columns.wallpapers[i].wallpaperImg[2].uri
      newImg.onload = () => { // 图片加载成功后把地址给原来的img
        console.log('加载成功')
        picindex.value=i
      }
    }
    const close=()=>{
      picindex.value=-1
    }
    const list = computed(() => store.state.columns || 0)
    return {
      setLove,
      fullScreen,
      list,
      close,
      picindex,
      beforpic
    }
  },
  methods:{
      used(index){
        axios.get(`/apis/wallpapercontent/wallpaper/report/opt?type=3&wallpaperId=${this.list.wallpapers[index].wallpaperId}`).then(res=>{
        }).catch(e=>{
            
        })
      },
      dele(index){
         axios.get(`/apis/wallpapercontent/wallpaper/report/opt?type=2&wallpaperId=${this.list.wallpapers[index].wallpaperId}`).then(res=>{
                this.$store.commit('delete',index)
            // store.commit('setLove',index)
          }).catch(e=>{
            
          })
      },
      next(){
         //  文档实际高度（包括不可见内容的高度）
        let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
        //  文档可见内容的高度
        let clientHeight = window.innerHeight || Math.min(document.documentElement.clientHeight, document.body.clientHeight)
        //  文档内容顶部（垂直滚动时顶部的内容会被隐藏）到它的视口可见内容（实际可以看见的内容顶部）的距离
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop

        // 判断垂直滚动条是否滚动到最底部： scrollHeight - scrollTop === clientHeight
        if(this.list.count>(parseInt(this.list.skip)+parseInt(this.list.limit))){
            if (scrollHeight - scrollTop <= clientHeight+150&&this.loading) {
              // // 获取数据
              this.loading=false
              // console.log(this.list.skip)
              let url=this.url.replace('skip=0','skip='+(parseInt(this.list.skip)+parseInt(this.list.limit)))
              axios.get(`/apis/${url}`).then(res=>{
                this.loading=true
                this.$store.commit('addColumns',res.data.data)
                // store.commit('setLove',index)
              }).catch(e=>{
                
              })
            }
        }
      }
  },
  created(){
    console.log(`/api/this.url`)
    document.addEventListener('scroll',this.next)
  },
  unmounted(){
    document.removeEventListener("scroll", this.next);
  } 
  
})
</script>
<style lang="stylus" scoped>
.row
  .pic-col
    margin 5px 0
    .pic-warp
      position relative
      width 100%
      height 100%
      overflow hidden
      cursor pointer
      &:hover
        .pic
          transform scale(1.2)
        .pic-tools
          display block
      .pic
        width 100%
        height 100%
        object-fit: cover
        transition all 1s
      .pic-tools
        display none
        overflow hidden
        position absolute 
        top 0px 
        right 5px
        left 0px
        height 50px
        width 100%
        padding 0
        list-style none
        box-shadow: inset 0px 25px 20px 0px rgba(10,12,18,0.48);
        transition all .3s
        line-height 50px
        padding 0 10px
        font-size 14px
        .love
            color rgb(254,107,122)
        li
          float right
          color #fff
          &:nth-child(1)
            float left
          &:nth-of-type(n+2)
            height 30px
            width 30px
            font-size 13px
            border-radius 50%
            margin 10px 10px
            text-align center
            line-height 30px
            background-color rgba(0,0,0,.5)
            transition all .2s
            &:hover
              background-color rgba(0,0,0,.8)
.empty
  height 70vh
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .empty-img
      width 200px
  .empty-title
    color #000
    font-size 14px
    margin-bottom 30px
  .go-home
    padding 10px 30px
    text-align center
    color #ffffff
    background-color rgb(76,106,255)
    border-radius 50px
    text-decoration none

</style>